<template>
    <view>
        <!-- gc_school/pages/vip/index.wxml -->
        <cu-custom bgColor="bgmain" :isBack="true">
            <view slot="content">充值</view>
        </cu-custom>
		
		<view class="padding" style="position: relative;">
			<image style="width: 100%;" mode="widthFix" :src="fileUrl+'shop_bg1.png'"></image>
			<view class="balance_item">
				<view class="flex justify-end margin-bottom-lg align-center" @click="show=true">
					<image src="../../../static/rule.png" style="width: 30rpx;height: 30rpx;"></image>
					<view class="text-white text-sm margin-left-sm opacity">规则说明</view>
				</view>
				<view class="text-xxl text-white text-center margin-top-lg">{{storeInfo.info.balance}}</view>
				<view class="text-df text-white margin-top-sm text-center opacity">我的金豆</view>
			</view>
		</view>
		
        <view class="box">
			<view :class="'item flex align-center justify-between ' + (type == index ? 'active' : '')" @tap="current" :data-type="index" :data-item="item" v-for="(item,index) in dataList" :key="index">
			    <view class="name">{{item.number}}金豆</view>
				<text class="text-bold text-black">￥{{ item.price }}</text>
			</view>
        </view>
		
			
        <!-- <view class="btns" @tap="submit">立即支付{{ money }}元</view> -->
        <view class="btns" @tap="submit">立即支付</view>
		
		<view v-if="show" class="cover" @click="show=false">
			<view class="content">
				<text class="cuIcon-close"></text>
				<view class="text-xl text-bold text-center margin-bottom-sm">规则说明</view>
				<mp-html :content="rule"></mp-html>
			</view>
		</view>
        
      </view>
</template>

<script>
// gc_school/pages/vip/index.js
var app = getApp();
export default {
    data() {
        return {
            money: 0,
            type: 0,
            userInfo: {
                is_vip: 0,
                dead_time: ''
            },
			dataList:[],
			number:0,
			storeInfo:{},
			rule:'',
			show:false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        var that = this;
		that.rule = that.escape2Html(uni.getStorageSync('sys').store_recharge_rule);
		that.getStore()
        app.globalData.util.request({
            url: 'StoreRecharge/index',
			data:{
				s_id:uni.getStorageSync('schoolId')
			},
            success(res) {
				console.log(res.data.data.list)
                that.setData({
					dataList:res.data.data.list,
                    money: res.data.data.list[0]['price'],
                    number: res.data.data.list[0]['number'],
                });
            }
        },true);
        // this.getuserInfo();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    // onShareAppMessage: function () {},
    methods: {
		getStore() {
		    var that = this;
		    app.globalData.util.request({
		        url: 'ZhBusiness/index',
				method: 'GET',
		        data: {},
		        success(res) {
		            that.setData({
		                storeInfo: res.data.data
		            });
		        }
		    },true);
		},
        //获取用户信息
        // getuserInfo() {
        //     var that = this;
        //     app.globalData.util.request({
        //         url: 'entry/wxapp/UserInfo',
        //         data: {
        //             openid: uni.getStorageSync('openid')
        //         },

        //         success(res) {
        //             that.setData({
        //                 userInfo: res.data.data.info
        //             });
        //         }
        //     });
        // },

        current(e) {
			console.log(e.currentTarget.dataset.item)
            this.setData({
                type: e.currentTarget.dataset.type,
                money: e.currentTarget.dataset.item.price,
                number: e.currentTarget.dataset.item.number,
            });
        },

        submit() {
            app.globalData.util.request({
                url: 'ZhBusiness/businessPointPay',
                data: {
                    money: this.money,
					number:this.number,
                    s_id: uni.getStorageSync('schoolId'),
                    type: this.type,
                    is_store: 1
                },

                success(res) {
					console.log(res.data.data.paydata)
                    uni.requestPayment({
                        timeStamp: res.data.data.paydata.timestamp,
                        nonceStr: res.data.data.paydata.nonceStr,
                        package: res.data.data.paydata.package,
                        signType: res.data.data.paydata.signType,
                        paySign: res.data.data.paydata.paySign,
                        success: function (res) {
                            console.log('success');
                            uni.navigateTo({
                                url: '/gc_school/pages/user/index'
                            });
                        },
                        fail: function (res) {
					
                            console.log('fail',res);
                        }
                    });
                }
            },true);
        }
    }
};
</script>
<style lang="scss">
/* gc_school/pages/vip/index.wxss */
page {
    background-color: white;
}
.box {
    // display: flex;
    margin-top: 10rpx;
	padding: 0 30rpx 30rpx;
    /* padding: 0 10%; */
	// flex-flow: wrap;
	// justify-content: space-between;
}

.item {
	padding: 30rpx;
	margin-top: 40rpx;
    height: 150rpx;
    text-align: center;
    font-size: 30rpx;
    color: #dfaa4c;
	border-radius: 16rpx 46rpx 16rpx 46rpx;
	background-color: #F7F8F9;
    border: 4rpx solid #F7F8F9;
    /* box-shadow: 2rpx 2rpx 2rpx 2rpx #F9F9F9; */
	// margin-right: 5%;
	// &:nth-child(3n){
	// 	margin-right:0px;
	// }
}
.active {
    border: 4rpx solid #FF6647;
    background-color: #F7F8F9;
	.name{
		color: #FF6849 !important;
	}
	text{
		color: #FF4C4D !important;
	}
}
.item .name {
    color: black;
	font-size: 30rpx;
	font-weight: bold;
}
.item text {
	font-size: 40rpx;
}
.btns {
    margin: 50rpx 5% 60rpx;
    width: 90%;
    height: 100rpx;
    line-height: 100rpx;
    background: linear-gradient(270deg, #FF716C 0%, #FF484A 100%);
    text-align: center;
    border-radius: 60rpx;
    font-size: 32rpx;
    font-weight: bold;
	color: white;
}
.time {
    margin-top: 100rpx;
    text-align: center;
    font-size: 32rpx;
}
.rule_line {
    display: flex;
    font-size: 30rpx;
    justify-content: center;
}
.rule {
    /* color: #747474; */
    /* color: #F5CF69; */
    font-weight: bold;
}
.balance_item{
	position: absolute;
	top: 17%;
	width: 90%;
}
.opacity{
	opacity: 0.7;
}
.cover{
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 99;
	top: 0;
	.content{
		max-height: 600rpx;
		overflow-y: scroll;
		position: absolute;
		background-color: white;
		width: 90%;
		margin-left: 5%;
		top: 50%;
		transform: translateY(-50%);
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
		.cuIcon-close{
			font-size: 44rpx;
			float: right;
			font-weight: bold;
		}
	}
}
</style>
